import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import { getAegis, insertWhite, updateWhite } from 'hook/whiteList.ts';

const FormItem = Form.Item;
const { Option } = Select;

export default props => {
    const {
        form: { getFieldDecorator, getFieldsValue, resetFields },
        title,
        visible,
        setStatus,
        detail = {},
        handleFetchList
    } = props;
    const formItem = ['editor_uin', 'editor_openid', 'editor_aegisid', 'editor_uid', 'editor_aid', 'editor_remark'];
    const [aegis, setAegis] = useState([{ id: 0, name: '全部项目'}]);
    // 获取匹配的aegisid
    let timer = null;
    const handleSearch = val => {
        if (parseInt(val) === 0) {
            return setAegis([{ id: 0, name: '全部项目'}]);
        }
        clearTimeout(timer);
        timer = setTimeout(() => {
            getAegis(val, setAegis)
        }, 500);
    }
    useEffect(() => {
        handleSearch(detail.aegisid || 0);
    }, [detail.aegisid]);

    // 隐藏modal并刷新table
    function hidden_Update() {
        setStatus(false);
        resetFields();
        handleFetchList();
    }
    // 提交表单
    const handleSubmit = () => {
        const formValue = getFieldsValue(formItem);
        // 删除所有没有实际值的条件
        for (const [key, val] of Object.entries(formValue)) {
            const actualVal = typeof val === 'string' ? val.trim() : val;
            if (~key.indexOf('editor_')) {
                Reflect.deleteProperty(formValue, key);
                formValue[key.split('editor_')[1]] = actualVal;
            }
        }
        // 必要字段不能为空
        if (!formValue.uin && !formValue.openid) {
            return message.error('uin和openid至少有一个不为空');
        }
        if (!formValue.aegisid) {
            return message.error('aegisid不能为空');
        }

        // 判断是新增还是更新
        if (detail.uin) {
            formValue.id = detail.id;
            updateWhite(formValue, () => {
                message.success('更新成功');
                hidden_Update();
                setAegis([{ id: 0, name: '全部项目'}]);
            }, () => message.error('更新失败'));
        } else {
            insertWhite(formValue, () => {
                message.success('新建成功');
                hidden_Update();
                setAegis([{ id: 0, name: '全部项目'}]);
            }, err => message.error(err.msg || '新建失败'));
        }
    }
    // 取消
    const handleCancel = () => {
        setStatus(false);
        resetFields(formItem);
        setAegis([{ id: 0, name: '全部项目'}]);
    }

    return (
        <Modal
            title={title}
            visible={visible}
            onOk={handleSubmit}
            onCancel={handleCancel}
            className="white-list-form"
            okText="确定"
            cancelText="取消"
        >
            <Form>
                <FormItem label="uin">
                    {getFieldDecorator('editor_uin', {
                        initialValue: detail.uin,
                    })(<Input placeholder="请输入uin" />)}
                </FormItem>
                <FormItem label="openid">
                    {getFieldDecorator('editor_openid', {
                        initialValue: detail.openid,
                    })(<Input placeholder="请输入openid" />)}
                </FormItem>
                <FormItem label="aegisid">
                    {getFieldDecorator('editor_aegisid', {
                        initialValue: detail.aegisid, // 默认值
                        rules: [
                            {
                                required: true,
                                message: 'aeisid不能为空'
                            }
                        ]
                    })(<Select 
                        showSearch
                        placeholder="请输入aegisid，如0、2、3"
                        onSearch={handleSearch} // 模糊匹配相应的aegis，后端id为整数，暂时做不了模糊
                    >
                        {
                            aegis.map(item => (
                                <Option
                                    key={`${item.id}`}
                                    value={`${item.id}`}
                                >
                                    {`${item.name}(${item.id})`}
                                </Option>))
                        }
                    </Select>)}
                </FormItem>
                <FormItem label="uid">
                    {getFieldDecorator('editor_uid', {
                        initialValue: detail.uid
                    })(<Input placeholder="请输入uid" />)}
                </FormItem>
                <FormItem label="aid">
                    {getFieldDecorator('editor_aid', {
                        initialValue: detail.aid
                    })(<Input placeholder="请输入aid" />)}
                </FormItem>
                <FormItem label="备注">
                    {getFieldDecorator('editor_remark', {
                        initialValue: detail.remark
                    })(<Input placeholder="请输入备注" />)}
                </FormItem>
            </Form>
        </Modal>
    );
}